<!DOCTYPE HTML>
<html lang="en" dir="ltr">

<head id="reportHead">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title></title>
  <script>
    // Show/hide text area controls based on the value
    function onPrintButtonClicked() {
      var notesContainer, i;
      notesContainer = document.getElementsByClassName("esriCTNotesContainer");
      //process notes to show/hide based on contents
      for (i = 0; i < notesContainer.length; i++) {
        if (notesContainer[i]) {
          //Hide the notes which are not having values
          if (notesContainer[i].children[1].value.trim() === "") {
            notesContainer[i].className += " esriCTHideReportNotes";
          }
          else {
            //Removes hidden class if available
            notesContainer[i].className =
              notesContainer[i].className.replace("esriCTHideReportNotes", "");
          }
        }
      }
      //after processing notes, print the window
      window.print();
    }
  </script>
  <!-- Report prev page css -->
  <style type="text/css">
    .esriCTReportMapWait {
      height: 5px;
      width: 100%;
      position: relative;
      overflow: hidden;
      background-color: #ddd;
    }

    .esriCTReportMapWait:before {
      display: block;
      position: absolute;
      content: "";
      left: -200px;
      width: 200px;
      height: 5px;
      background-color: #2980b9;
      animation: loading 2s linear infinite;
    }

    @keyframes loading {
      from {
        left: -200px;
        width: 30%;
      }
      50% {
        width: 30%;
      }
      70% {
        width: 70%;
      }
      80% {
        left: 50%;
      }
      95% {
        left: 120%;
      }
      to {
        left: 100%;
      }
    }

    .esriCTHTMLData {
      position: relative;
      width: 100%;
      height: auto;
    }

    .jimu-rtl .esriCTHTMLData {
      direction: rtl;
    }

    .esriCTTable {
      margin-top: 10px;
      padding: 0;
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%;
      page-break-inside: avoid;
      table-layout: fixed;
    }

    .jimu-rtl .esriCTTable {
      direction: rtl;
    }

    .esriCTTable th {
      border: 1px solid gray;
      background-color: #E4E4E4;
      word-wrap: break-word;
    }

    .esriCTTable td {
      border: 1px solid gray;
      word-wrap: break-word;
    }

    .esriCTSectionTitle {
      font-size: 18px;
      color: #0f96cc;
      font-weight: bold;
      margin: 30px 0px;
      width: calc(100% - 10px);
      word-break: break-all;
    }

    .jimu-rtl .esriCTSectionTitle {
      float: right;
      direction: rtl;
    }

    .jimu-rtl .esriCTReportMap .esriCTSectionTitle {
      float: none;
    }

    .esriCTReportLogo {
      float: left;
      max-width: calc(50% - 10px);
      margin: auto 10px auto 0;
      max-height: 90%;
      position: absolute;
      top: 0;
      bottom: 0;
    }

    .jimu-rtl .esriCTReportLogo {
      float: right;
      margin: auto 0 auto 10px;
    }

    .esriCTPrintTitleDiv {
      height: 56px;
      float: right;
      min-width: 50%;
    }

    .jimu-rtl .esriCTPrintTitleDiv {
      float: left;
      direction: rtl;
    }

    .esriCTInputTitle {
      height: 55px;
      line-height: 55px;
      border: none;
      font-size: 25px;
      width: 100%;
      padding: 0px;
    }

    .esriCTInputTitle::-ms-clear {
      display: none;
    }

    .esriCTReportMain {
      background: #FFF;
      border: solid 1px #000;
      margin: 0 auto;
      padding: 20px;
      width: 797px;
    }

    .esriCTReportMap {
      text-align: center;
    }

    .esriCTReportMapImg {
      max-width: 96%;
      margin-top: 10px;
    }

    .esriCTReportLandscapeMapImg {
      max-width: 80%;
    }

    .esriCTReportMapFail {
      height: 50px;
    }

    .esriCTReportFooter {
      text-align: center;
      font-size: 80%;
      padding: 10px 0;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    .esriCTPrintPage {
      padding: 30px 0;
      margin: 20px auto;
      font-family: arial, sans-serif;
      font-size: 13px;
    }

    .esriCTReportBar {
      width: 100%;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 6;
      height: 50px;
      background: #e2f1fc;
      border-bottom: 1px solid #000;
    }

    .jimu-rtl .esriCTReportBar {
      left: inherit;
      right: 0;
    }

    .esriCTPrintButton,
    .esriCTCloseButton {
      color: #444;
      font-family: Verdana, Helvetica, sans-serif;
      font-size: 12px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      border: 1px solid #8b8b8b;
      box-shadow: none;
      -webkit-box-shadow: none;
      background: #F2F2F2;
      background: url();
      background: -moz-linear-gradient(top, #F2F2F2 0%, #D1D1D1 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F2F2F2), color-stop(100%, #D1D1D1));
      background: -webkit-linear-gradient(top, #F2F2F2 0%, #D1D1D1 100%);
      background: -o-linear-gradient(top, #F2F2F2 0%, #D1D1D1 100%);
      background: -ms-linear-gradient(top, #F2F2F2 0%, #D1D1D1 100%);
      background: linear-gradient(to bottom, #F2F2F2 0%, #D1D1D1 100%);
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#D1D1D1', GradientType=0);
      margin: 10px 20px;
      line-height: 16px;
      display: block;
      padding: 5px 10px;
      outline: 0;
      text-decoration: none;
      cursor: pointer;
      font-weight: 400;
      white-space: nowrap;
      float: right;
    }

    .jimu-rtl .esriCTPrintButton,
    .jimu-rtl .esriCTCloseButton {
      float: left;
    }

    .esriCTPrintButton:hover,
    .esriCTPrintButton:focus,
    .esriCTCloseButton:hover,
    .esriCTCloseButton:focus {
      background: #E5E6E6;
      background: url();
      background: -moz-linear-gradient(top, #E5E6E6 0%, #A0A1A1 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #E5E6E6), color-stop(100%, #A0A1A1));
      background: -webkit-linear-gradient(top, #E5E6E6 0%, #A0A1A1 100%);
      background: -o-linear-gradient(top, #E5E6E6 0%, #A0A1A1 100%);
      background: -ms-linear-gradient(top, #E5E6E6 0%, #A0A1A1 100%);
      background: linear-gradient(to bottom, #E5E6E6 0%, #A0A1A1 100%);
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E5E6E6', endColorstr='#A0A1A1', GradientType=0);
    }

    .esriCTReportHeader {
      display: block;
      width: 100%;
      height: 60px;
      border-bottom: 1px solid #000;
      margin-bottom: 5px;
      position: relative;
    }

    .esriCTReportBarMsg {
      text-align: center;
      margin-top: 16px;
    }

    .jimu-rtl .esriCTReportBarMsg {
      direction: rtl;
    }

    .esriCTNotesContainer {
      width: 100%;
      margin-top: 30px;
    }

    .esriCTReportNotes {
      resize: none;
      width: calc(100% - 5px);
      max-width: calc(100% - 5px);
      font-family: "Arial";
      font-size: 13px;
      border: 1px solid gray;
      overflow-y: hidden;
      /* prevents scroll bar flash */
    }

    .esriCTReportNotesParagraph {
      display: none;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    
    .jimu-rtl .esriCTReportNotesParagraph {
      float: right;
      direction: rtl;
    }
    
    .jimu-rtl .esriCTReportNotes {
      direction: rtl;
    }

    .esriCTHidden {
      display: none;
    }
  </style>
  <!-- Media print css -->
  <style type="text/css" media="print">
    .esriCTPrintPage {
      padding: 0;
      color: #000;
      margin: 0;
      float: none;
      background: #fff url(none);
    }

    .esriCTTable {
      page-break-inside: avoid;
      border-collapse: collapse;
      border-spacing: 0;
    }

    .esriCTPageBreak {
      page-break-after: always;
    }

    .esriCTReportFooter {
      font-size: 75%;
    }

    .esriCTReportBar {
      display: none;
    }

    .esriCTReportMain {
      border: none;
    }

    .esriCTReportMapImg {
      box-shadow: none;
      border: none;
    }

    .esriCTReportNotes {
      display: none;
    }

    .esriCTReportNotesParagraph {
      display: block;
    }

    .esriCTHideReportNotes {
      display: none;
    }

    .esriCTTable th {
      border: 1px solid gray;
    }

    .esriCTTable td {
      border: 1px solid gray;
    }
	
  </style>
  <script>
    function showError(evt) {
      alert(document.getElementById('showErrorButton').innerHTML);
    }
  </script>
</head>

<body id="reportBody" class="esriCTPrintPage">
  <button id="showErrorButton" style="display: none" onclick="showError()"></button>
  <div class="esriCTReportBar">
    <div id="closeButton" class="esriCTCloseButton" title="Close" onclick="window.close();">Close</div>
    <div id="printButton" class="esriCTPrintButton" title="Print" onclick="onPrintButtonClicked();">Print</div>
    <div id="reportBarMsg" class="esriCTReportBarMsg"></div>
  </div>
  <div id="reportMain" class="esriCTReportMain">
    <div id="reportHeader" class="esriCTReportHeader">
      <img id="reportLogo" class="esriCTReportLogo esriCTHidden" src="">
      <div id="printTitleDiv" class="esriCTPrintTitleDiv">
        <input id="reportTitle" type="text" class="esriCTInputTitle">
      </div>
    </div>
    <div id="reportData"></div>
    <div id="footNotes" class="esriCTReportFooter">
    </div>
  </div>
</body>

</html>